<template>
	<view class="img" :style="{ 'border-radius': borderRaduis, 'width': width, 'height': height }">
		<view class="loadding" v-if="isLoad">
			<view class="loading-icon" :style="{ width: loadWidth, height: loadWidth }"></view>
		</view>
		<image :style="{borderRadius: round}" :src="imgSrc" :mode="mode" @load="loadEvent" @error="errorEvent" lazy-load v-if="isShow"
			class="contentImg"></image>
		<view class="errImg flex flex-direction align-center justify-center" v-if="!isLoad && !isShow">
			<block v-if="!isGrowth">
				<!-- #ifdef APP-PLUS || MP-WEIXIN -->
				<text class="errContent"
					:style="{ background: 'url(' + errorImg + ') no-repeat center/cover', width: w, height: w }"></text>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<image :src="errorImg" class="errContent" :style="{ width: w, height: w }" mode="aspectFill"></image>
				<!-- #endif -->
				<text class="text margin-top-xs" v-if="num > 60">{{i18n['加载失败']}}</text>
			</block>
			<block v-if="isGrowth">
				<!-- #ifdef APP-PLUS || MP-WEIXIN -->
				<text class="errContent"
					:style="{ background: 'url(' + errorImg + ') no-repeat center/cover', width: '100%', height: '100%' }"></text>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<image :src="errorImg" class="errContent" :style="{ width: '100%', height: '100%' }" mode="aspectFill">
				</image>
				<!-- #endif -->
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'fu-image',
		props: {
			round:{
				type: String,
				default: ''
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '100%'
			},
			// 图片链接
			src: {
				type: [Number, String],
				default: ''
			},
			// 图片mode属性
			mode: {
				type: String,
				default: 'aspectFill'
			},
			radius: {
				type: [Number, String],
				default: 0
			},
			errorImg: {
				type: String,
				default:''
			},
			isGrowth: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isShow: true, //图片显示
				isLoad: true, //loading加载
				imgHeight: '100%', //图片高度
				num: 0,
			};
		},
		computed: {
			w() {
				let _w = Math.floor(this.num * 0.4) > 50 ? 50 : Math.floor(this.num * 0.4);
				return _w + 'px';
			},
			loadWidth() {
				let _w = Math.floor(this.num * 0.7);
				// console.log(_w)
				return _w + 'px';
			},
			borderRaduis() {
				return this.getUnitValue(this.radius);
			},
			imgSrc() {
				return this.src;
			}
		},
		watch: {
			src: {
				handler(newVal, oldVal) {
					if (!newVal) {
						this.isLoad = false;
						this.isShow = false;
					} else {
						this.isLoad = true;
						this.isShow = true;
					}
				},
				immediate: true
			}
		},
		mounted() {
			setTimeout(() => {
				this.$nextTick(function() {
					let w;
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.img')
						.boundingClientRect(data => {
							let num = data.width > data.height ? data.height : data.width;
							this.num = num;
						})
						.exec();
				});
			}, 10);
		},
		methods: {
			// 判断传入的值，是否带有单位，如果没有，就默认用rpx单位
			getUnitValue(val) {
				if (/(%|px|rpx|auto)$/.test(val)) return val;
				else return val + 'rpx';
			},
			// 图片加载成功事件
			loadEvent(e) {
				// console.log('ok',e);
				this.isLoad = false;
				this.isShow = true;
			},
			// 图片加载失败事件
			errorEvent(e) {
				// console.log('error',e);
				this.isLoad = false;
				this.isShow = false;
			}
		}
	};
</script>

<style scoped lang="scss">
	.img {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;

		.contentImg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.errImg {
		background: #f4f4f4;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		color: #999999;
		width: 100%;
		height: 100%;
		font-size: 24rpx;

		.errContent {
			// width: 30%;
			// height: 30%;
			// background: url(./static/error.png) no-repeat center/cover;
		}

		.text {
			// transform: scale(0.7);
		}
	}

	.loadding {
		background: #f4f4f4;
		width: 100%;
		height: 100%;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		position: relative;
	}

	.loadImg {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.loading-icon {
		background: url(static/logo.png) no-repeat center/cover;
		border-radius: 50%;
		width: 40%;
		height: 40%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		//animation: a 1s steps(12) infinite;
	}

	@-webkit-keyframes a {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		to {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes a {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		to {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
</style>
